'use client';

import Layout from './components/Layout';
import Link from 'next/link';
import { 
  IconApple, 
  IconSearch, 
  IconClipboardList, 
  IconHeartHandshake,
  IconChevronRight,
  IconBrain,
  IconScale,
  IconChartBar,
  IconActivity,
  IconTarget,
  IconAlertCircle
} from '@tabler/icons-react';
import AnimatedBackground from './components/AnimatedBackground';
import { useAuth } from './contexts/AuthContext';

export default function Home() {
  const { user } = useAuth();

  return (
    <Layout>
      {/* 头部横幅 */}
      <section className="relative bg-blue-600 text-white py-20 px-8 rounded-t-lg overflow-hidden">
        <AnimatedBackground />
        {/* 添加一个半透明的遮罩层 */}
        <div className="absolute inset-0 bg-gradient-to-r from-blue-600/50 to-blue-700/50" />
        <div className="max-w-4xl mx-auto text-center relative z-10">
          <h1 className="text-4xl md:text-5xl font-bold mb-6">
            智能健康饮食推荐系统
          </h1>
          <p className="text-xl md:text-2xl mb-8 text-blue-100">
            基于人工智能的个性化饮食方案，助您实现健康生活
          </p>
          <div className="flex justify-center gap-4">
            <Link 
              href="/diet-recommend" 
              className="bg-white/90 backdrop-blur-sm text-blue-600 px-6 py-3 rounded-lg font-medium 
                hover:bg-white transition-colors"
            >
              开始体验
            </Link>
            {!user && (
              <Link 
                href="/register" 
                className="bg-blue-500/90 backdrop-blur-sm text-white px-6 py-3 rounded-lg font-medium 
                  hover:bg-blue-500 transition-colors"
              >
                立即注册
              </Link>
            )}
          </div>
        </div>
      </section>

      {/* 功能概览 */}
      <section className="py-16 px-8 bg-white">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-center mb-12">
            为什么选择我们的系统
          </h2>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="text-center p-6">
              <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <IconBrain className="w-8 h-8 text-blue-600 stroke-2" />
              </div>
              <h3 className="text-xl font-semibold mb-3">AI智能推荐</h3>
              <p className="text-gray-600">
                基于先进的人工智能算法，为您提供个性化的饮食建议
              </p>
            </div>
            <div className="text-center p-6">
              <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <IconScale className="w-8 h-8 text-blue-600 stroke-2" />
              </div>
              <h3 className="text-xl font-semibold mb-3">科学营养配比</h3>
              <p className="text-gray-600">
                严格遵循营养学标准，确保饮食均衡健康
              </p>
            </div>
            <div className="text-center p-6">
              <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <IconChartBar className="w-8 h-8 text-blue-600 stroke-2" />
              </div>
              <h3 className="text-xl font-semibold mb-3">数据可视分析</h3>
              <p className="text-gray-600">
                直观展示营养摄入数据，帮助您更好地了解饮食状况
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* 详细功能介绍 */}
      <section className="py-16 px-8 bg-gray-50">
        <div className="max-w-6xl mx-auto space-y-24">
          {/* 饮食推荐 */}
          <div className="py-12">
            <div className="container mx-auto px-4">
              <div className="grid md:grid-cols-2 gap-8 items-center">
                <div>
                  <h2 className="text-3xl font-bold mb-6">智能饮食推荐</h2>
                  <p className="text-gray-600 mb-8">
                    基于您的个人情况，为您量身定制每日饮食计划。我们的AI系统会考虑您的：
                  </p>
                  <ul className="space-y-4 mb-6">
                    <li className="flex items-center gap-3">
                      <div className="p-2 bg-blue-50 rounded-lg">
                        <IconScale className="w-6 h-6 text-blue-600" />
                      </div>
                      <span>身高体重和基础代谢率</span>
                    </li>
                    <li className="flex items-center gap-3">
                      <div className="p-2 bg-green-50 rounded-lg">
                        <IconActivity className="w-6 h-6 text-green-600" />
                      </div>
                      <span>日常活动水平</span>
                    </li>
                    <li className="flex items-center gap-3">
                      <div className="p-2 bg-yellow-50 rounded-lg">
                        <IconTarget className="w-6 h-6 text-yellow-600" />
                      </div>
                      <span>健康目标</span>
                    </li>
                    <li className="flex items-center gap-3">
                      <div className="p-2 bg-red-50 rounded-lg">
                        <IconAlertCircle className="w-6 h-6 text-red-600" />
                      </div>
                      <span>饮食禁忌</span>
                    </li>
                  </ul>
                  <Link 
                    href="/diet-recommend" 
                    className="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium"
                  >
                    开始推荐
                    <IconChevronRight className="w-5 h-5 ml-1" />
                  </Link>
                </div>
                <div className="relative">
                  <img
                    src="/home-1.png"
                    alt="智能饮食推荐"
                    className="rounded-lg shadow-lg w-full"
                  />
                </div>
              </div>
            </div>
          </div>

          {/* 营养信息查询 */}
          <div className="flex flex-col md:flex-row-reverse items-center gap-12">
            <div className="flex-1">
              <div className="flex items-center gap-3 mb-4">
                <IconSearch className="w-6 h-6 text-blue-600 stroke-2" />
                <h3 className="text-2xl font-bold">营养信息查询</h3>
              </div>
              <p className="text-gray-600 mb-6 text-lg">
                提供丰富的食材营养数据库，让您轻松了解每种食材的营养成分。支持快速搜索和详细的营养成分分析，帮助您做出更明智的饮食选择。
              </p>
              <Link 
                href="/nutrition-search" 
                className="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium"
              >
                开始查询
                <IconChevronRight className="w-5 h-5 ml-1" />
              </Link>
            </div>
            <div className="flex-1">
              <img
                src="/home-2.png"
                alt="营养信息查询"
                className="rounded-lg shadow-lg w-full"
              />
            </div>
          </div>

          {/* 饮食记录 */}
          <div className="flex flex-col md:flex-row items-center gap-12">
            <div className="flex-1">
              <div className="flex items-center gap-3 mb-4">
                <IconClipboardList className="w-6 h-6 text-blue-600 stroke-2" />
                <h3 className="text-2xl font-bold">饮食记录追踪</h3>
              </div>
              <p className="text-gray-600 mb-6 text-lg">
                便捷的饮食记录功能，帮助您追踪每日营养摄入。通过数据可视化展示，直观了解您的饮食习惯，并获得个性化的改善建议。
              </p>
              <Link 
                href="/diet-record" 
                className="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium"
              >
                开始记录
                <IconChevronRight className="w-5 h-5 ml-1" />
              </Link>
            </div>
            <div className="flex-1">
              <img
                src="/home-3.png"
                alt="饮食记录追踪"
                className="rounded-lg shadow-lg w-full"
              />
            </div>
          </div>

          {/* 健康建议 */}
          <div className="flex flex-col md:flex-row-reverse items-center gap-12">
            <div className="flex-1">
              <div className="flex items-center gap-3 mb-4">
                <IconHeartHandshake className="w-6 h-6 text-blue-600 stroke-2" />
                <h3 className="text-2xl font-bold">智能健康建议</h3>
              </div>
              <p className="text-gray-600 mb-6 text-lg">
                基于您的饮食记录和健康目标，提供专业的健康建议。我们的AI系统会分析您的饮食模式，并给出针对性的改善建议，帮助您培养健康的饮食习惯。
              </p>
              <Link 
                href="/health-advice" 
                className="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium"
              >
                获取建议
                <IconChevronRight className="w-5 h-5 ml-1" />
              </Link>
            </div>
            <div className="flex-1">
              <img
                src="/home-4.png"
                alt="智能健康建议"
                className="rounded-lg shadow-lg w-full"
              />
            </div>
          </div>
        </div>
      </section>
    </Layout>
  );
}
